<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端 - 我的</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #f5f5f5;
        }
        /* 主色调蓝紫色 */
        .primary-color {
            color: #6366f1; /* indigo-500 */
        }
        /* 底部导航栏高度和点击区域 */
        .bottom-nav {
            height: 64px;
        }
        .bottom-nav-item {
            padding: 8px 12px;
            min-height: 44px; /* 确保点击区域足够大 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .bottom-nav-item:active {
            opacity: 0.7;
        }
        /* 安全区域适配（iPhone X等） */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .bottom-nav-wrapper {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 用户信息卡片 -->
    <div class="px-4 py-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center">
                    <i class="fas fa-user text-blue-500 text-2xl"></i>
                </div>
                <div>
                    <div class="text-xl font-bold text-gray-800">张先生</div>
                    <div class="text-gray-500 text-sm mt-1">138****8888</div>
                </div>
            </div>
            <i class="fas fa-edit text-gray-400 text-xl"></i>
        </div>
    </div>

    <!-- 数据统计 -->
    <div class="px-4 pb-4">
        <div class="grid grid-cols-3 gap-3">
            <div class="bg-white rounded-lg p-4 text-center shadow-sm">
                <div class="text-2xl font-bold text-gray-800">25</div>
                <div class="text-gray-600 text-xs mt-1">总需求</div>
            </div>
            <div class="bg-white rounded-lg p-4 text-center shadow-sm">
                <div class="text-2xl font-bold text-green-600">12</div>
                <div class="text-gray-600 text-xs mt-1">已完成</div>
            </div>
            <div class="bg-white rounded-lg p-4 text-center shadow-sm">
                <div class="text-2xl font-bold text-blue-600">8</div>
                <div class="text-gray-600 text-xs mt-1">进行中</div>
            </div>
        </div>
    </div>

    <!-- 功能菜单 -->
    <div class="px-4 pb-4">
        <div class="bg-white rounded-lg shadow-sm">
            <a href="customer-requirement-list.html" class="flex items-center justify-between p-4 border-b border-gray-100 hover:bg-gray-50 transition">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-list text-blue-500 text-xl"></i>
                    <span class="text-gray-800">我的需求</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </a>
            <!-- <a href="customer-quote-list.html" class="flex items-center justify-between p-4 border-b border-gray-100 hover:bg-gray-50 transition">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-tag text-blue-500 text-xl"></i>
                    <span class="text-gray-800">我的报价</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </a>
            <a href="customer-contract-list.html" class="flex items-center justify-between p-4 border-b border-gray-100 hover:bg-gray-50 transition">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-file-contract text-blue-500 text-xl"></i>
                    <span class="text-gray-800">我的协议</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </a> -->
            <!-- <div class="flex items-center justify-between p-4">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-bell text-blue-500 text-xl"></i>
                    <span class="text-gray-800">消息通知</span>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div> -->
        </div>
    </div>

    <!-- 设置菜单 -->
    <div class="px-4 pb-4">
        <div class="bg-white rounded-lg shadow-sm">
            <!-- <div class="flex items-center justify-between p-4 border-b border-gray-100">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-user text-gray-600 text-xl"></i>
                    <span class="text-gray-800">个人信息</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div> -->
            <!-- <div class="flex items-center justify-between p-4 border-b border-gray-100">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-cog text-gray-600 text-xl"></i>
                    <span class="text-gray-800">账号设置</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div> -->
            <div class="flex items-center justify-between p-4 border-b border-gray-100">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-question-circle text-gray-600 text-xl"></i>
                    <span class="text-gray-800">帮助中心</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-4">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-info-circle text-gray-600 text-xl"></i>
                    <span class="text-gray-800">关于我们</span>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="text-gray-400 text-xs">v1.0.0</span>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 退出登录 -->
    <div class="px-4 pb-20">
        <button class="w-full bg-white text-red-500 py-3 rounded-lg font-medium shadow-sm">
            退出登录
        </button>
    </div>

    <!-- 底部导航栏（Tab Bar） -->
    <div class="fixed bottom-0 left-1/2 transform -translate-x-1/2 bg-white border-t border-gray-200 z-50 bottom-nav-wrapper" style="width: 100%; max-width: 414px;">
        <div class="grid grid-cols-4">
            <!-- 首页 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-home.html'" role="button" tabindex="0" aria-label="首页" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-home.html'}">
                <i class="fas fa-home text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">首页</div>
            </div>
            <!-- 需求 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-requirement-list.html'" role="button" tabindex="0" aria-label="我的需求列表" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-requirement-list.html'}">
                <i class="fas fa-list text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">需求</div>
            </div>
            <!-- 案例 -->
            <div class="bottom-nav-item" onclick="window.location.href='#'" role="button" tabindex="0" aria-label="服务案例" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='#'}">
                <i class="fas fa-heart text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">案例</div>
            </div>
            <!-- 我的（当前选中） -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-profile.html'" role="button" tabindex="0" aria-label="个人中心" aria-current="page" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-profile.html'}">
                <i class="fas fa-user primary-color text-xl" aria-hidden="true"></i>
                <div class="primary-color text-xs mt-1 font-medium">我的</div>
            </div>
        </div>
    </div>
</body>
</html>
